<template>
  <div class="m-upload">
    <div class="picUploadBox"></div>
    <!-- 照片墙 -->
    <Upload
      class="picture-card-upload"
      v-if="listType === 'picture-card'"
      v-bind="$attrs"
      v-on="$listeners"
      list-type="picture-card"
      :auto-upload="false"
      :limit="limit"
      ref="imgUpload"
      :http-request="uploadImg"
      :file-list="fileList"
      :on-exceed="handleExceed"
      :on-change="handleChange"
      :on-remove="handleRemove"
    >
      <div class="img-wrap">
        <slot />
      </div>

      <template v-slot:tip>
        <div class="el-upload__tip">
          {{ tip }}
        </div>
        <m-button @click="uploadImg" :loading="uploadLoading">上传图片</m-button>
      </template>
    </Upload>

    <!-- 列表 -->
    <Upload
      class="text-upload"
      v-if="listType === 'text'"
      v-bind="$attrs"
      v-on="$listeners"
      list-type="text"
      :auto-upload="false"
      :limit="limit"
      ref="textUpload"
      :http-request="uploadText"
      :file-list="fileList"
      :on-exceed="handleExceed"
      :on-change="handleChange"
      :on-remove="handleRemove"
    >
      <template v-slot:trigger>
        <slot />
      </template>

      <slot name="file" />

      <template v-slot:tip>
        <div class="el-upload__tip">
          {{ tip }}
        </div>
        <m-button @click="uploadText">上传文件</m-button>
      </template>
    </Upload>
  </div>
</template>

<script>
import { Upload } from "element-ui"
import MButton from "@/components/common/m-button/MButton"
import { uploadPic, uploadFile } from "@/request/api"

export default {
  name: "MUpload",
  components: { MButton, Upload },
  props: {
    listType: {
      type: String,
      default: "picture-card"
    },
    limit: Number,
    tip: String
  },
  data() {
    return {
      fileList: [],
      uploadList: [],
      uploadLoading: false
    }
  },
  mounted() {},
  methods: {
    handleExceed(files, fileList) {
      this.$toast.show("上传总数不能超过" + this.limit, 1000, false)
    },
    handleChange(file, fileList) {
      this.fileList = fileList
    },
    handleRemove(file, fileList) {
      console.log(file, fileList)
    },
    uploadText() {
      let that = this
      let list = that.fileList
      let allUp = true
      for (const i in list) {
        if (list[i].status != "success") {
          allUp = false
          setTimeout(function() {
            that.upFile(list[i].raw, i)
          }, 200)
        }
      }
      if (allUp) {
        that.$toast.show("没有可上传的文件！", 1000, false)
      }
    },
    upImg(file, index) {
      let that = this
      if (that.beforeUpload(file, index)) {
        const imgSrc = file
        let fordata = new FormData()
        fordata.append("field", imgSrc)
        if (/^image/.test(imgSrc.type)) {
          that.uploadLoading = true
          that.fileList[index].status = "isUploading"
          uploadPic(fordata).then(res => {
            if(res.status !== 200) {
              that.uploadLoading = false
              return this.$message.error(res.message)
            }
            that.uploadList.push(res.data.path)
            that.uploadLoading = false
            that.fileList[index].status = "success"
            that.$emit("picList", that.uploadList)
          }).catch(err => {
            this.$message.error(err.message)
          })
        } else {
          that.$toast.show("请上传图片格式的文件", 1000, false)
        }
      }
    },
    upFile(file, index) {
      let that = this
      if (that.beforeUpload(file, index)) {
        const imgSrc = file
        let fordata = new FormData()
        fordata.append("field", imgSrc)
        that.uploadLoading = true
        that.fileList[index].status = "isUploading"
        uploadFile(fordata).then(res => {
          that.uploadList.push(res.data.path)
          that.uploadLoading = false
          that.fileList[index].status = "success"
          that.$emit("fileList", that.uploadList)
        })
      }
    },
    uploadImg(e) {
      let that = this
      let list = that.fileList
      let allUp = true
      for (const i in list) {
        if (list[i].status != "success") {
          allUp = false
          setTimeout(function() {
            that.upImg(list[i].raw, i)
          }, 200)
        }
      }
      if (allUp) {
        that.$toast.show("没有可上传的图片！", 1000, false)
      }
    },
    beforeUpload(file, index) {
      let fileSize
      index = parseInt(index) + 1
      const that = this
      if (that.listType == "text") {
        //文件类型
        const fileName = file.name.substring(file.name.lastIndexOf(".") + 1)
        if (
          fileName != "png" &&
          fileName != "jpg" &&
          fileName != "jpeg" &&
          fileName != "word" &&
          fileName != "pdf" &&
          fileName != "zip"
        ) {
          that.uploadTemplateDialog = false
          that.$toast.show("文件类型不正确", 1000, false)
          return false
        }
        //读取文件大小
        fileSize = file.size
        if (fileSize > 1024 * 1024 * 10) {
          that.uploadTemplateDialog = false
          that.$toast.show("文件大于10M!", 1000, false)
          return false
        } else {
          return true
        }
      } else {
        //读取文件大小
        fileSize = file.size
        if (fileSize > 1024 * 1024) {
          that.uploadTemplateDialog = false
          that.$toast.show("第" + index + "个文件大于1M!", 1000, false)
          return false
        } else {
          return true
        }
      }
    }
  }
}
</script>

<style lang="scss" scoped>
@import "~@/assets/style/common.scss";
/deep/ .el-upload-list--picture-card .el-upload-list__item .el-icon-close {
  display: inline-block;
  border: 1px solid #666;
  border-radius: 50%;
  text-align: center;
  width: 20px;
  height: 20px;
  line-height: 18px;
}
/deep/
  .el-upload-list--picture-card
  .el-upload-list__item:hover
  .el-upload-list__item-status-label,
/deep/
  .el-upload-list__item.is-success:hover
  .el-upload-list__item-status-label {
  display: block;
}
/deep/ .el-upload-list__item.is-success .el-icon-close {
  display: none;
}
.m-upload {
  .picture-card-upload {
    /deep/ .el-upload--picture-card {
      width: 200px;
      height: 170px;
      //width: 72px;
      //height: 72px;
      //border: none;
      background-color: #fff;
      border: 1px solid #eee;
      .img-wrap {
        width: 100%;
        height: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
      }
      .el-icon-close {
        display: block;
      }
      &:hover {
        border-color: $theme-color-1;
      }
    }

    /deep/ .el-upload-list__item {
      width: 200px;
      height: 170px;
      border-radius: 10px;
      position: relative;
      margin-right: 30px;
      border: 1px solid #eee;
      .el-upload-list__item-actions {
        display: none;
      }

      .thumbnail {
        width: 200px;
        height: 170px;
      }

      .close {
        position: absolute;
        right: 0;
        top: 0;
        cursor: pointer;
      }
    }
  }

  .text-upload {
    position: relative;

    /deep/ .el-upload-list {
      position: absolute;
      top: 0;
      left: 100px;
    }
  }
}
</style>
